<template>
  <!-- 1.3.8 联动管理-->
  <div class="linkage">
    <div class="top betweenbox">
      <div class="top-tab centerbox">
        <el-button type="primary" @click="handleChange(1)" :class="{actives:tabStatus===1}">联动事件查询</el-button>
        <el-button type="primary" @click="handleChange(2)" :class="{actives:tabStatus===2}">联动配置</el-button>
      </div>
      <div class="top-back" @click="goBack"></div>
    </div>
    <div class="main">
      <linkageEventQuery v-if="tabStatus===1" :smartData = "$route.params.smartData" />
      <linkageConfiguration v-if="tabStatus===2" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import linkageEventQuery from "./linkageEventQuery.vue";
import linkageConfiguration from "./linkageConfiguration.vue";

@Component({
  components: {
    linkageEventQuery,
    linkageConfiguration,
  },
})
export default class extends Vue {
  public tabStatus: number = 1;

  handleChange(val: number) {
    this.tabStatus = val;
  }

// dom渲染完成时
  mounted() {
    let query = this.$route.query;
    if (query.tab == "2") {
      this.tabStatus = 2;
    } else {
      this.tabStatus = 1;
    }
  }
  // 返回辅助监控首页
  goBack() {
    this.$router.push("overview");
  }
}
</script>

<style lang="scss" scoped>
.linkage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-tab {
      width: 3rem;
      font-size: 0.2rem;
      font-weight: 400;
      color: rgba(118, 238, 250, 1);
    }
    &-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
  }
}
</style>
<style lang="scss">
.linkage {
  .actives {
    background: linear-gradient(
      360deg,
      rgba(20, 123, 252, 1) 0%,
      rgba(12, 157, 254, 1) 40%,
      rgba(3, 191, 255, 1) 100%
    );
  }
}
.top-tab {
  .el-button {
    font-size: 0.2rem;
  }
}
</style>

